<template>
<div>
    <!-- 面包屑 -->
    <a-breadcrumb style="margin: 16px 0">
        <a-breadcrumb-item>Users</a-breadcrumb-item>
        <a-breadcrumb-item>Blog</a-breadcrumb-item>
        <a-breadcrumb-item><a @click='tohome'>home</a></a-breadcrumb-item>
        <a-breadcrumb-item>publish</a-breadcrumb-item>
    </a-breadcrumb>
    <a-form-model ref="ruleForm" :model="ruleForm" v-bind="layout">
    <!-- 主题 -->
    <a-form-model-item has-feedback label="主题" >
    <a-select mode="tags" style="width: 100%" placeholder="请输入主题" @change="handleChange" v-model="ruleForm.projects">
    <a-select-option v-for="i in ruleForm.items" :key="i">
      {{ i }}
    </a-select-option>
  </a-select>
    </a-form-model-item>
    <!-- 博客名 -->
    <a-form-model-item has-feedback label="博客名" prop="name">
      <a-input v-model="ruleForm.name" autocomplete="off" placeholder="请输入博客名"/>
    </a-form-model-item>
    <!-- 内容 -->
    
    <a-form-model-item has-feedback label="内容" >
       <a-button  @click="showDrawer" style="position:relative;left:-236px"> <a-icon type="plus" /> 编辑博客内容 </a-button>
       <a-drawer
      title="编辑博客内容"
      :width="1000"
      :visible="visible"
      :body-style="{ paddingBottom: '80px' }"
      @close="onClose"
    >
    <mavon-editor v-model="ruleForm.text" :toolbars="toolbars" class="text" />
    <div
        :style="{
          position: 'absolute',
          right: 0,
          bottom: 0,
          width: '100%',
          borderTop: '1px solid #e9e9e9',
          padding: '10px 16px',
          background: '#fff',
          textAlign: 'right',
          zIndex: 1,
        }"
      >
        <a-button :style="{ marginRight: '8px' }" @click="onClose">
          取消
        </a-button>
              <a-button type="primary" @click="submitForm('ruleForm')" >
        发布
      </a-button>
      </div>
       </a-drawer>
      
    </a-form-model-item>


  </a-form-model>
</div>

</template>
<script>
export default {

  data() {
    return {
       toolbars: {
            bold: true, // 粗体
            italic: true, // 斜体
            header: true, // 标题
            underline: true, // 下划线
            strikethrough: true, // 中划线
            mark: true, // 标记
            superscript: true, // 上角标
            subscript: true, // 下角标
            quote: true, // 引用
            ol: true, // 有序列表
            ul: true, // 无序列表
            link: true, // 链接
            imagelink: true, // 图片链接
            code: true, // code
            table: true, // 表格
            fullscreen: true, // 全屏编辑
            readmodel: true, // 沉浸式阅读
            htmlcode: true, // 展示html源码
            help: true, // 帮助
            /* 1.3.5 */
            undo: true, // 上一步
            redo: true, // 下一步
            trash: true, // 清空
            // save: true, // 保存（触发events中的save事件）
            /* 1.4.2 */
            navigation: true, // 导航目录
            /* 2.1.8 */
            alignleft: true, // 左对齐
            aligncenter: true, // 居中
            alignright: true, // 右对齐
            /* 2.2.1 */
            subfield: true, // 单双栏模式
            preview: true, // 预览
  },
      visible: false,
      ruleForm: {
          name:'',
          text:'',
          items:['Java基础','王者荣耀','python开发','社交','生活'],
          projects:['Java基础'],
          
      },
      layout: {
        labelCol: { span: 4 },
        wrapperCol: { span: 14 },
      },
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(async valid => {
        if (valid) {
          
            if(this.ruleForm.projects!=[]&&this.ruleForm.text!=''&&this.ruleForm.name!=''){
          var type=''
          for(var i=0;i<this.ruleForm.projects.length;i++){
            if(i==this.ruleForm.projects.length-1){
              type=type+this.ruleForm.projects[i]
            }
            else{
              type=type+this.ruleForm.projects[i]+','
            }
            
          }
          const {data:res} = await this.$http.post('http://localhost:8081/blog/publishblog',
            this.$qs.stringify({author:window.sessionStorage.getItem('author'),title:this.ruleForm.name,content:this.ruleForm.text,type:type}))
            if(res.code ==200){
              this.$message.success('发布成功')
              this.ruleForm.projects=['Java基础']
              this.ruleForm.name=''
              this.ruleForm.text=''
              this.visible = false;
            }else{
              this.$message.error('发布失败')
            }
          
        }
        else{
          this.$message.error('所填内容不能为空')
        }
        } else {
          console.log('发布失败');
          return false;
        }
      });
    },
    handleChange(value) {
      // console.log(`selected ${value}`);
    },
    tohome(){
        this.$router.push('/welcome')
        window.sessionStorage.setItem('activepath','/welcome')
    },
    showDrawer() {
      this.visible = true;
    },
    onClose() {
      this.visible = false;
    },
  },
};
</script>
<style lang="less" scoped>
.text{
  width: 100%;
  height:450px;
  // position: relative;
  // top: 30px;
  // left: 0px;
}
</style>